<template>
    <div class="container">
        <mt-header title="个人信息">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="touxiang">
            <img :src="this.avatar" @click="change" />
        </div>
        <div class="uploadWrap">
            <div class="uploadBox" v-show="open">
                <img v-if="form.file.length > 0" :src="getBaseUrl() + form.file" />
                <div class="noPic" v-else @click="chooseImage">
                    <u-icon name="plus" size="28px"></u-icon>
                    <span>选择图片</span>
                </div>
                <input type="file" name="" ref="chooseImg" style="visibility:hidden" accept="image/jpeg,image/jpg,image/png"
                    @change="changeImage" />
                <div class="publishWrap fixed-bottom u-p-b-20">
                    <div class="u-m-lr-10">
                    </div>
                    <mt-button type="primary" @click="changeAvatar">发布</mt-button>
                </div>
            </div>
        </div>
        <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
        <mt-field label="性别" placeholder="请输入性别" v-model="sex"></mt-field>
        <mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field>
        <mt-cell class="score" title="我的积分" :value=score></mt-cell>
        <mt-cell style="text-align: start;padding-left:30px" title="我的收藏" to="/myCollect" is-link></mt-cell>
        <mt-cell style="text-align: start;padding-left:30px" title="添加入住人" to="/personList" is-link></mt-cell>
        <mt-cell style="text-align: start;padding-left:30px" title="我的优惠券" to="/userCoupon" is-link></mt-cell>
        <mt-button class="save" type="primary" size="large" @click="save">保存</mt-button>
    </div>
</template>
<script>
import uIcon from '../../components/u-icon.vue';
export default {
    components: {
        uIcon
    },
    data() {
        return {
            avatar: '',
            form: {
                file: '',
            },
            baseUrl: this.getBaseUrl(),
            upload: {},
            actionSheetList: [
                { name: '是', method: this.actionSheetCallback },
                { name: '否', method: this.actionSheetCallback }
            ],
            formData: '',
            open: false,
            username: '',
            sex: '',
            birthday: '',
            fileName: '',
            score: ''
        }
    },
    methods: {
        getUserInfo() {
            this.$axios({
                url: this.$api.userInfo,
                method: 'get',
                Headers: { Authorization: 'Bearer' + this.$store.state.token }
            }).then(res => {
                // this.avatar = this.baseUrl + res.userInfo.avatar
                this.avatar = res.userInfo.avatar
                // console.log(this.avatar);
            })
        },
        changeAvatar() {
            this.$axios({
                url: this.$api.avatar,
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: this.formData
            }).then(res => {

            })
        },
        changeImage(e) {
            console.log(e)
            var file = e.target.files[0];
            var formData = new FormData();
            formData.append("file", file);
            this.formData = formData;
            this.uploadImg();
        },
        uploadImg() {
            this.$axios({
                url: this.$api.upload,
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data;'
                },
                data: this.formData
            }).then(res => {
                this.form.file = res.fileName
                // console.log(res.fileName);
            })
        },
        chooseImage() {
            this.$refs.chooseImg.click();
        },
        change() {
            this.open = !this.open
        },
        save() {
            this.$axios({
                url: this.$api.user,
                method: 'put',
                data: {
                    nickname: this.username,
                    birthday: this.birthday,
                    sex: this.sex
                }
            }).then(res => {
                this.getUserInfo()
                this.changeAvatar()
                location.reload();
            })
        },
        getScore() {
            this.$axios({
                url: this.$api.score,
                method: 'get'
            }).then(res => {
                const sorce = res.obtain - res.consume
                this.score = sorce
                // console.log(res);
            })
        }
    },
    mounted() {
        this.getUserInfo()
        this.getScore()
    }

}
</script>
<style lang="scss">
* {
    padding: 0;
    margin: 0;

}

.container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;

}

.mint-header {
    color: black;
    background: #fff;
    height: auto;
    position: relative;
}

img {
    width: 100px;
    height: 100px;
}

.formWrap {
    text-align: left;
}

.publishWrap {
    padding: 15px;

    button {
        width: 100%;
    }
}

.uploadWrap {
    width: 100%;

    &::before {
        content: '';
        width: calc(100% - 10px);
        margin-left: 10px;
        border-top: 1px #bdbdbd solid;
    }
}

.uploadBox {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #f4f5f6;
    margin: 0 auto;

    img {
        width: 100px;
        height: 100px;
    }

    .noPic {
        height: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        span {
            font-size: 14px;
            padding-top: 10px;
        }
    }
}

.score {
    text-align: start;
    padding-left: 30px;
}

.save {
    margin: 0 auto;
    position: absolute;
    bottom: 0;
}
</style>